<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>如何使用 CSS Grid 快速而又灵活的布局</title>
	<style type="text/css">
		.container,
		.container1,
		.container2{
			display: grid;
			grid-template-columns: repeat(12,1fr);
			grid-template-rows:50px 350px 50px;
			grid-gap:5px;
			text-align: center;
		}
		
		.container{
			grid-template-areas:
				"h h h h h h h h h h h h"
				"m m m m m m m m m m n n"
				"f f f f f f f f f f f f";
		}
		
		.container1{
			margin-top: 10px;
			grid-template-areas:
				". h h h h h h h h h h h"
				"n n m m m m m m m m m m"
				"f f f f f f f f f f f .";
		}
		
		.container2{
			margin-top: 10px;
			grid-template-areas:
				"h h h h h h h h h h h h"
				"m m m m m m m m m m n n"
				"f f f f f f f f f f f f";
		}
		
		.header{
			grid-area:h;
			background-color: #acf4b6;
			line-height: 50px;
		}
		
		.nav{
			grid-area:n;
			background-color: #ffe975;
			line-height: 350px;
		}
		
		.main{
			grid-area:m;
			background-color: #5efffa;
			line-height: 350px;
		}
		
		.footer{
			grid-area:f;
			background-color: #e6b4fd;
			line-height: 50px;
		}
		
		@media screen and (max-width: 640px) {
			.container{
				grid-template-areas:
					"h h h h h h n n n n n n"
					"m m m m m m m m m m m m"
					"f f f f f f f f f f f f";
				}
			.nav{
				line-height: 50px;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="header">
			HEADER
		</div>
		<div class="nav">
			菜单区域
		</div>
		<div class="main">
			CONTENT
		</div>
		<div class="footer">
			FOOTER
		</div>
	</div>
	
	<div class="container1">
		<div class="header">
			HEADER
		</div>
		<div class="nav">
			NAV
		</div>
		<div class="main">
			CONTENT
		</div>
		<div class="footer">
			FOOTER
		</div>
	</div>
	
	<div class="container2">
		<div class="header">
			HEADER
		</div>
		<div class="nav">
			NAV
		</div>
		<div class="main">
			CONTENT
		</div>
		<div class="footer">
			FOOTER
		</div>
	</div>
</body>
</html>